<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
</head>
<style>
    .lunBo {
        position: relative;
        width: 1226px;
        height: 460px;
        margin: 0 auto;
    }
    .lunBo img {
        position: absolute;
        width: 1226px;
        height: 460px;
        margin-top: 0;
        margin-left: 0;
        display: none;
    }
</style>
<body>
<div class="lunBo">
    <img src="img/lunbo1.jpg">
    <img src="img/lunbo2.jpg">
    <img src="img/lunbo3.jpg">
    <img src="../day08/img/lunbo4.jpg">
    <img src="img/lunbo5.jpg">
    <img src="img/lunbo6.jpg">
</div>
<script>
    let imgArr = document.getElementsByClassName('lunBo')[0].getElementsByTagName('img')
    let imgNum = imgArr.length
    let index = 0
    //通过JS控制要显示的img的display设置为block，另外5个img的display设置为none，依次循环设置6张图片的display就可以实现图片的轮播。
    imgArr[0].style.display = 'block'//???
    setInterval(function (){
        index++;
        if(index > imgNum-1){
            index = 0
        }
        //先隐藏所有图片
            for (let i = 0; i < imgNum; i++) {
                imgArr[i].style.display = 'none'
            }
            //再显示当前图片
            imgArr[index].style.display = 'block'
    },1000)
</script>
</body>
</html>
